
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>YUI 2 in 3 &amp; Gallery Modules</title>

<style type="text/css">
/*margin and padding on body element
  can introduce errors in determining
  element position and are not recommended;
  we turn them off as a foundation for YUI
  CSS treatments. */
body {
	margin:0;
	padding:0;
}
</style>

<link type="text/css" rel="stylesheet" href="../../build/cssfonts/fonts-min.css" />
<script type="text/javascript" src="../../build/yui/yui-debug.js"></script>


<!--begin custom header content for this example-->
<style id="styleoverrides">
#wrapper {
    margin: 2em;
    width: 550px;
}
#wrapper .status {
    border: 1px solid black;
    margin-top: .5em;
    padding: .5em;
}

#wrapper textarea {
    visibility: hidden;
}

.yui-skin-sam .yui-toolbar-container .yui-toolbar-save span.yui-toolbar-icon {
    background-image: url( assets/save.png );
    background-position: 3px 2px;
    left: 4px;
    top: 2px;
}
.yui-skin-sam .yui-toolbar-container .yui-toolbar-save-selected span.yui-toolbar-icon {
    background-image: url( assets/save.png );
    background-position: 3px 2px;
    left: 4px;
    top: 2px;
}

.yui-skin-sam .yui-toolbar-container .yui-toolbar-clear span.yui-toolbar-icon {
    background-image: url( assets/clear.png );
    background-position: 3px 2px;
    left: 4px;
    top: 2px;
}
.yui-skin-sam .yui-toolbar-container .yui-toolbar-clear-selected span.yui-toolbar-icon {
    background-image: url( assets/clear.png );
    background-position: 3px 2px;
    left: 4px;
    top: 2px;
}

.yui-skin-sam .yui-toolbar-container .yui-toolbar-reset span.yui-toolbar-icon {
    background-image: url( assets/reset.png );
    background-position: 3px 2px;
    left: 4px;
    top: 2px;
}
.yui-skin-sam .yui-toolbar-container .yui-toolbar-reset-selected span.yui-toolbar-icon {
    background-image: url( assets/reset.png );
    background-position: 3px 2px;
    left: 4px;
    top: 2px;
}

.yui-skin-sam #main .yui-toolbar-container .yui-toolbar-titlebar h2 {
    font-size: 100%;
    font-weight: bold;
}
.yui-skin-sam #main .yui-toolbar-container .yui-toolbar-titlebar h2 {
    color:#000000;
    font-size:100%;
    font-weight:bold;
    margin:0;
    padding:0.3em 1em;
    text-align:left;
}

.yui-skin-sam #main .yui-toolbar-container .yui-toolbar-group h3 {
    color:#808080;
    font-size:75%;
    margin:1em 0 0;
    padding-bottom:0;
    padding-left:0.25em;
    text-align:left;
    font-weight: bold;
}

</style>


<!--end custom header content for this example-->

</head>

<body class="yui3-skin-sam  yui-skin-sam">

<h1>YUI 2 in 3 &amp; Gallery Modules</h1>

<div class="exampleIntro">
	<p>This example demonstrates using YUI 2 with YUI 3 and a Gallery module.</p>
			
</div>

<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->



<div id="wrapper">
<textarea id="editor">This <strong>is a test</strong>, this is only a test.

</textarea>
<div class="status"> </div>
</div>

<script>


YUI({insertBefore: 'styleoverrides'}).use('node', 'gallery-storage-lite', 'yui2-editor', function(Y, result) {

    var YAHOO = Y.YUI2, res = Y.one('#wrapper .status'),
    defaultText = Y.one('#editor').get('value'),
    write = function(str) {
        var d = new Date();
        str += ' :: ' + d.toTimeString();
        res.set('innerHTML', str);
    },
    save = function() {
        Y.StorageLite.on('storage-lite:ready', function () {
            var html = editor.saveHTML();
            Y.StorageLite.setItem('editorContent', html);
            write('Editor content saved..');
        });
    };

    var editor = new YAHOO.widget.Editor('editor', {
        dompath: true,
        width: '550px',
        height: '250px',
        toolbar: {
            titlebar: 'Saving Editor',
            buttons: [
                { group: 'saveclear', label: 'Save & Clear',
                    buttons: [
                        { type: 'push', label: 'Save', value: 'save' },
                        { type: 'push', label: 'Clear', value: 'clear' },
                        { type: 'push', label: 'Reset', value: 'reset' }
                    ]
                },
                { group: 'textstyle', label: 'Font Style',
                    buttons: [
                        { type: 'push', label: 'Bold', value: 'bold' },
                        { type: 'push', label: 'Italic', value: 'italic' },
                        { type: 'push', label: 'Underline', value: 'underline' },
                        { type: 'separator' },
                        { type: 'select', label: 'Arial', value: 'fontname', disabled: true,
                            menu: [
                                { text: 'Arial', checked: true },
                                { text: 'Arial Black' },
                                { text: 'Comic Sans MS' },
                                { text: 'Courier New' },
                                { text: 'Lucida Console' },
                                { text: 'Tahoma' },
                                { text: 'Times New Roman' },
                                { text: 'Trebuchet MS' },
                                { text: 'Verdana' }
                            ]
                        },
                        { type: 'spin', label: '13', value: 'fontsize', range: [ 9, 75 ], disabled: true },
                        { type: 'separator' },
                        { type: 'color', label: 'Font Color', value: 'forecolor', disabled: true },
                        { type: 'color', label: 'Background Color', value: 'backcolor', disabled: true }
                    ]
                }
            ]
        }
    });
    editor.on('toolbarLoaded', function() {
        editor.toolbar.on('clearClick', function() {
            editor.setEditorHTML('<br>');
            write('Editor content cleared..');
        });
        editor.toolbar.on('resetClick', function() {
            if (confirm('Are you sure you want to reset the Editor?')) {
                editor.setEditorHTML(defaultText);
                Y.StorageLite.setItem('editorContent', null);
                write('Editor content reset to default..');
            }
        });
        editor.toolbar.on('saveClick', save);
    });
    Y.later(5000, editor, function() {
        if (editor.editorDirty) {
            editor.editorDirty = null;
            save();
        }
    }, {}, true);
    Y.StorageLite.on('storage-lite:ready', function () {
        var editorValue = Y.StorageLite.getItem('editorContent');
        if (editorValue !== null) {
            Y.one('#editor').set('value', editorValue);
            write('Loaded editor content from Local Storage');
        } else {
            write('Loaded default editor content');
        }
        editor.render();
    });


});

</script>

<!--END SOURCE CODE FOR EXAMPLE =============================== -->

</body>
</html>
